<template>
  <div class="help-center">
    <TitleBar title="帮助中心" bgColor="transparent" color="#fff"></TitleBar>
    <header class="help-center-header">
      <p>在线客服</p>
      <p>人工服务时间：{{serviceTime}}</p>
      <div>
        <span class="btn" @click="onTel">立即咨询</span>
      </div>
    </header>
    <div class="help-list">
      <div class="question-title"><span>常见问题</span></div>
      <ListItem leftText="教学视频" @click.native="onTeach">
        <img src="./assets/video-icon.png" alt="" slot="icon">
      </ListItem>
      <ListItem leftText="投票规则" @click.native="onRule">
        <img src="./assets/rule-icon.png" alt="" slot="icon">
      </ListItem>
      <ListItem leftText="投票分享演示" @click.native="onVote">
        <img src="./assets/vote-icon.png" alt="" slot="icon">
      </ListItem>
      <ListItem leftText="品牌推荐流程" @click.native="onProcess">
        <img src="./assets/process-icon.png" alt="" slot="icon">
      </ListItem>
    </div>
    <vodal :show="phoneshow" animation="zoom" measure="rem" :width="6" :height="3.52" :closeButton="false">
      <div class="vodal-box">
        <div class="title">
          <h6>客服电话</h6>
          <p>品牌中网客服电话为：</p>
          <p class="tel">{{tel}}</p>
        </div>
        <div class="close" @click="phoneshow = false">我知道了</div>
      </div>
    </vodal>
  </div>
</template>

<script>
import TitleBar from '../../components/TitleBar'
import ListItem from '../../components/ListItem'
export default {
  components: {
    TitleBar,
    ListItem
  },
  data() {
    return {
      tel: '',
      serviceTime: '',
      phoneshow: false
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.$api.getSetting(this.$route.query.catid).then(data => {
        if (parseInt(data.data.status) === 1) {
          this.tel = data.data.setting.service_tel
          this.serviceTime = data.data.setting.work_time
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 客服电话
    onTel() {
      if (this.$getDeviceInfo().isPhone) {
        window.location.href = 'tel:' + this.tel
      } else {
        this.phoneshow = true
      }
    },
    onTeach() {
      this.$router.push("/teachVideo/" + "?catid=" + this.$route.query.catid)
    },
    onRule() {
      this.$router.push("/voteRules/" + this.$route.query.catid)
    },
    onVote() {
      this.$router.push("/shareDemo/" + "?catid=" + this.$route.query.catid)
    },
    onProcess() {
      this.$router.push("/process/" + "?catid=" + this.$route.query.catid)
    }
  }
}
</script>

<style scoped lang="scss">
.help-center {
  background-color: #fff;
  min-height: 100vh;
}
.help-center-header {
  width: 100%;
  height: 3.7rem;
  margin-top: -0.88rem;
  background: url(./assets/header-bg.png) center no-repeat;
  background-size: cover;
  padding-top: 1.2rem;
  p {
    text-align: center;
    font-size: 0.34rem;
    color: #fff;
    margin-bottom: 0.25rem;
  }
  div {
    margin-top: 0.44rem;
    text-align: center;
    .btn {
      width: 2rem;
      height: 0.66rem;
      line-height: 0.6rem;
      background-color: transparent;
      border: 2px solid #fff;
      font-size: 0.32rem;
      color: #fff;
      border-radius: 0.1rem;
    }
  }
}
.help-list {
  // position: absolute;
  // top: 3.7rem;
  // bottom: 0;
  // left: 0;
  // right: 0;
  background-color: #fff;
  border-top: 0.2rem solid #f6f6f6;
  .question-title {
    margin: 0 0.3rem;
    position: relative;
    span {
      position: relative;
      z-index: 2;
      display: inline-block;
      font-size: 0.28rem;
      color: #999;
      padding: 0.2rem 0.3rem;
      background-color: #fff;
      margin-left: 1rem;
    }
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 1px;
      box-sizing: border-box;
      padding: 0 0.3rem;
      transform: scaleY(0.5);
      background-color: #e4e4e4;
      top: 0.4rem;
      left: 0;
    }
  }
}
.vodal-box {
  text-align: center;
  padding-top: 0.56rem;
  .title {
    h6 {
      font-size: 0.32rem;
      line-height: 0.32rem;
      color: #333;
      &::after {
        content: "";
        width: 1.2rem;
        height: 1px;
        background: #dfdfdf;
        display: inline-block;
        vertical-align: middle;
        margin-left: 0.4rem;
      }
      &::before {
        content: "";
        width: 1.2rem;
        height: 1px;
        background: #dfdfdf;
        display: inline-block;
        vertical-align: middle;
        margin-right: 0.4rem;
      }
    }
    p {
      margin-top: 0.52rem;
      font-size: 0.26rem;
      line-height: 0.26rem;
      color: #999;
    }
    .tel {
      margin-top: 0.2rem;
      font-size: 0.36rem;
      line-height: 0.36rem;
      color: #333;
    }
  }
  .close {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-top: 1px solid rgba(204, 204, 204, 1);
    line-height: 0.86rem;
    font-size: 0.3rem;
    color: #333;
    cursor: pointer;
  }
}
</style>
